<template>
	<view class="classify">
		<view class="top headline">
			<!-- <i class="cubeic-back"></i> -->
			商品分类
			<image src="/static/img/find_2.png" class="right" />
		</view>
		<view class="main">
			<view class="left">
				<view>
					<view>精选热销集合</view>
					<view>TOP爆款</view>
					<view class="stair" v-bind:class="{ active: classify1 == 1 }">
						<p @click="open1(1)">连衣裙</p>
						<view class="second_list" v-show="classify1 == 1">
							<view class="second" v-bind:class="{ active: classify2 == 2 }">
								<p @click="open2(2)">夏日新款</p>
								<view class="three" v-show="classify2 == 2"><view v-bind:class="{ active: classify3 == 3 }" @click="open3(3)">6.30上新</view></view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="right" ref="right" @scroll="mainScroll()">
				<p class="title">
					TOP爆款
					<i class="cubeic-arrow"></i>
				</p>
				<view class="shop">
					<view class="list">
						<image src="/static/img/logo1.png" />
						<view>修身连衣裙</view>
					</view>
					<view class="list">
						<image src="/static/img/logo1.png" />
						<view>修身连衣裙</view>
					</view>
				</view>
			</view>
		</view>
		<view class="go-top" v-show="is_go_top" @click="backTop"><image src="/static/img/go_top.png" /></view>
	</view>
</template>

<script>
export default {
	props: ['paging'],
	data() {
		return {
			classify1: 0,
			classify2: 0,
			classify3: 0,
			is_go_top: false,
			read: 0
		};
	},
	methods: {
		open1(e) {
			if (e === this.classify1) {
				this.classify1 = 0;
			} else {
				this.classify1 = e;
			}
			this.classify2 = 0;
			this.classify3 = 0;
		},
		open2(e) {
			if (e === this.classify2) {
				this.classify2 = 0;
			} else {
				this.classify2 = e;
			}
			this.classify3 = 0;
		},
		open3(e) {
			this.classify3 = e;
		},
		mainScroll() {
			let read = this.$refs.right.scrollTop;
			this.read = read;
			if (read > 200) {
				this.is_go_top = true;
			} else {
				this.is_go_top = false;
			}
		},
		backTop() {
			const that = this;
			let timer = setInterval(() => {
				let ispeed = Math.floor(-that.$refs.right.scrollTop / 10);
				that.$refs.right.scrollTop = that.$refs.right.scrollTop + ispeed;
				if (that.$refs.right.scrollTop === 0) {
					clearInterval(timer);
				}
			}, 16);
		}
	}
};
</script>

<style lang="less" scoped>
.classify {
	position: relative;
	height: 100%;
	background: #fff;
	.headline {
		image {
			position: absolute;
			width: 38rpx;
			height: 38rpx;
			top: 18rpx;
			right: 20rpx;
		}
	}
	.main {
		overflow: hidden;
		position: absolute;
		top: 0rpx;
		height: 100vh;
		padding: 110rpx 0 0;
		box-sizing: border-box;
		width: 100%;
		.left {
			width: 33.8%;
			height: 100%;
			box-sizing: border-box;
			padding-left: 31rpx;
			line-height: 110rpx;
			background: #f4f4f4;
			font-size: 26rpx;
			overflow: auto;
			.stair {
				padding-left: 31rpx;
				position: relative;
				ul {
					padding-left: 31rpx;
				}
				.second {
					position: relative;
					.three {
						.active {
							color: #bd3c8c;
						}
					}
				}
				.second:before {
					content: '';
					position: absolute;
					width: 0;
					height: 0;
					left: -30rpx;
					top: 42rpx;
					border-width: 12rpx;
					border-style: solid;
					border-color: #999999 transparent transparent transparent;
					transform: rotate(-90deg);
				}
				.active:before {
					top: 45rpx;
					transform: rotate(0);
				}
			}
			.stair:before {
				content: '';
				position: absolute;
				width: 0;
				height: 0;
				left: 0rpx;
				top: 42rpx;
				border-width: 12rpx;
				border-style: solid;
				border-color: #999999 transparent transparent transparent;
				transform: rotate(-90deg);
			}
			.active:before {
				top: 45rpx;
				transform: rotate(0);
			}
		}
		.right {
			width: 66.2%;
			height: 100%;
			overflow: auto;
			background: #FFFFFF;
			.title {
				padding: 41rpx 20rpx 41rpx 31rpx;
				font-size: 30rpx;
				.cubeic-arrow {
					float: right;
					color: #b8b8b8;
				}
			}
			.shop {
				.list {
					float: left;
					width: 27%;
					margin-left: 4.75%;
					text-align: center;
					image {
						width: 100%;
						height: 134rpx;
						border-radius: 10rpx;
					}
					view {
						line-height: 70rpx;
						font-size: 22rpx;
					}
				}
			}
		}
	}
}
</style>
